﻿<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>管理员</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }
    .header {
      display: flex;
      justify-content: center; /* 将内容居中 */
      align-items: center; /* 垂直居中 */
      margin-bottom: 20px;
    }
    .add-book {
      padding: 10px;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      transition: background-color 0.3s;
      margin-left: 20px; /* 添加左侧间距 */
    }
    .add-book:hover {
      background-color: #0056b3;
    }
    form {
      display: flex;
      margin: 0; /* 清除表单的默认间距 */
    }
    input[type="text"] {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      width: 400px;
      margin-right: 10px;
    }
    button {
      padding: 10px 15px;
      background-color: #044599;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #033d80;
    }
    table {
      width: 100%;
      table-layout: auto;
      border-collapse: collapse;
      background: white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    th {
      background-color: #044599;
      color: #fff;
      padding: 10px;
      text-align: center;
      font-size: 14px;
      border-bottom: 2px solid #02397F;
    }
    td {
      text-align: center;
      padding: 10px;
      font-size: 15px;
      color: #555;
      border-bottom: 1px solid #ddd;
    }
    a {
      text-decoration: none;
      color: #fff;
      background-color: #dc3545;
      padding: 5px 10px;
      border-radius: 5px;
      transition: background-color 0.3s;
    }
    a:hover {
      background-color: #c82333;
    }
    td a:nth-child(5) {
      background-color: #28a745; /* 删除 */
    }
    td a:nth-child(5):hover {
      background-color: #218838;
    }
    td a:nth-child(6) {
      background-color: #007bff; /* 编辑 */
    }
    td a:nth-child(6):hover {
      background-color: #0056b3;
    }
    @media (max-width: 600px) {
      table, thead, tbody, th, td, tr {
        display: block;
      }
      input[type="text"], button {
        width: 100%;
        margin-bottom: 10px;
      }
      .header {
        flex-direction: column; /* 小屏幕上垂直排列 */
        align-items: center; /* 居中对齐 */
      }
    }
    .alert {
      display: none;
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px;
      background-color: #f44336; /* 默认红色背景 */
      color: white;
      border-radius: 4px;
      z-index: 1000;
      transition: opacity 0.5s;
    }

    .alert-success {
      display: none; /* 保持和.alert一样的默认状态 */
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px;
      background-color: #4CAF50; /* 绿色 */
      color: white;
      border-radius: 4px;
      z-index: 1000;
      transition: opacity 0.5s;
    }
  </style>
  <script>
    function showAlert(message, isSuccess) {
      const alertBox = document.createElement('div');
      alertBox.className = isSuccess ? 'alert-success' : 'alert'; // 根据成功状态选择类名
      alertBox.innerText = message;
      document.body.appendChild(alertBox);

      // 显示提示框
      alertBox.style.display = 'block';

      // 在3秒后隐藏提示框
      setTimeout(() => {
        alertBox.style.opacity = 0;
        setTimeout(() => {
          document.body.removeChild(alertBox);
        }, 500);
      }, 3000);
    }

    function showInitialAlerts() {
      const urlParams = new URLSearchParams(window.location.search);
      if (urlParams.has('message')) {
        const message = urlParams.get('message');
        const isSuccess = urlParams.get('success') === 'true'; // 字符串转换为 boolean
        showAlert(message, isSuccess);
      }
    }
    window.onload = showInitialAlerts; // 页面加载时调用
  </script>
</head>
<body>

<h1>管理列表</h1>

<div class="user-info">
  登录用户: <strong><%= username %></strong>（<%= role === 'admin' ? '管理员' : '普通用户' %>）
  <a href="/logout" class="logout-link">退出登录</a> <!-- 退出登录链接 -->
</div>

<div class="header">
  <!-- 查询表单 -->
  <form action="/search" method="post">
    <input type="text" name="query" placeholder="按书名、作者或出版社搜索" required>
    <button type="submit">查询</button>
  </form>

  <!-- 添加图书按钮 -->
  <a class="add-book" href="/insert">添加图书</a>
</div>

<table>
  <thead>
  <tr>
    <th>图书编号</th>
    <th>书名</th>
    <th>作者</th>
    <th>出版社</th>
    <th>删除</th>
    <th>编辑</th>
    <th>库存</th>
    <th>借阅记录</th>
  </tr>
  </thead>
  <tbody>
  <% data.forEach(function (item, index) { %>
  <tr>
    <td><%= item.bookid %></td>
    <td><%= item.bookname %></td>
    <td><%= item.author %></td>
    <td><%= item.press %></td>
    <td><a href="/delete/<%= item.bookid %>">删除</a></td>
    <td><a href="/edit/<%= item.bookid %>">编辑</a></td>
    <td><%= item.stock %></td>
    <td>
      <a href="/borrow-records/<%= item.bookid %>">查看借阅记录</a>
    </td>
  </tr>
  <% }); %>
  </tbody>
</table>

</body>
</html>